<template>
  <div>
    <div>
      <a-card>
        <p class="text-lg font-bold">货品面板</p>
        <a-row :gutter="16">
          <a-col :span="24">
            <div class="flex ">
              <div
                @click="router.push(`/inventory/product/purchaseorder`)"
                class="box mx-3 border border-gray-500 bg-gradient-to-r   from-sky-500 to-sky-300  p-4 w-72 h-32 rounded-sm hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
              >
                <p
                  class="text-lg text-black font-bold  border-b-2 border-gray-900"
                >
                  进货管理
                </p>
                <a-space>
                  <a-badge color="#f50" text="供应商进货" />
                  <a-badge color="#f50" text="供应商退货" />
                </a-space>
                <BarChartOutlined class="icon" />
              </div>
              <DoubleRightOutlined />

              <div
                @click="router.push(`/inventory/product/saleorder`)"
                class="box mx-3 border border-gray-500 bg-gradient-to-r  from-green-500 to-green-300 p-4 w-72 h-32 rounded-sm hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
              >
                <p
                  class="text-lg text-black font-bold border-b-2 border-gray-900"
                >
                  出库管理
                </p>
                <a-space>
                  <a-badge color="#f50" text="自营商出库" />
                  <a-badge color="#f50" text="自营商退库" />
                </a-space>
                <LineChartOutlined class="icon" />
              </div>
              <DoubleRightOutlined />
              <div
                @click="router.push(`/inventory/product/inventorycount`)"
                class=" box mx-3 border border-gray-500 bg-gradient-to-r  from-orange-500 to-orange-300  p-4 w-72 h-32 rounded-sm hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
              >
                <p
                  class="text-lg text-black font-bold border-b-2 border-gray-900"
                >
                  盘点
                </p>
                <a-space>
                  <a-badge color="#f50" text="自营商盘点" />
                  <a-badge color="#f50" text="报损" />
                </a-space>
                <FundOutlined class="icon"/>
              </div>
              <DoubleRightOutlined />
              <div
                @click="router.push(`/inventory/product/stock`)"
                class="box mx-3 border border-gray-500 bg-gradient-to-r  from-red-500 to-red-300  p-4 w-72 h-32 rounded-sm hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
              >
                <p
                  class="text-lg text-black font-bold border-b-2 border-gray-900"
                >
                  统计分析
                </p>
                <a-space>
                  <a-badge color="#f50" text="历史库存" />
                  <a-badge color="#f50" text="实时库存" />
                </a-space>
                <PieChartOutlined class="icon"/>
              </div>
              <DoubleRightOutlined />
              <div
                @click="router.push(`/inventory/product/report`)"
                class="box mx-3 border border-gray-500 bg-gradient-to-r  from-purple-500 to-purple-300  p-4 w-72 h-32 rounded-sm hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
              >
                <p
                  class="text-lg text-black font-bold border-b-2 border-gray-900"
                >
                  报表
                </p>
                <div>
                  <a-space>
                    <a-badge color="#f50" text="总货单" />
                    <a-badge color="#f50" text="供应商货单" />
                  </a-space>
                </div>
                <div>
                  <a-space>
                    <a-badge color="#f50" text="货品分析" />
                    <a-badge color="#f50" text="货品趋势" />
                  </a-space>
                </div>
                <SlidersOutlined class="icon"/>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="mb-2 mt-2">
        <a-row>
          <a-col :span="8">
            <p>
              云同步
              <HuluTooltip>
                扫码枪条形码扫码录入，需注意更改其他参数
              </HuluTooltip>
            </p>
            <a-form layout="inline" :model="cloudForm">
              <a-form-item>
                <a-input
                  style="width: 400px"
                  v-model:value="cloudForm.code"
                  placeholder="产品编码"
                  ref="inputRef"
                  clear
                  allow-clear
                  @pressEnter="cloudSync"
                >
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-space>
                  <a-button
                    :loading="loading_cloud"
                    type="primary"
                    @click="cloudSync"
                  >
                    同步
                  </a-button>
                  <a-button type="dashed" danger @click="clear">
                    清空
                  </a-button>
                </a-space>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="8">
            <p>
              模板导入
              <HuluTooltip>
                下载模板并按照规范填写，生成最新报价表
              </HuluTooltip>
            </p>
            <a-space>
              <a-button type="primary"> 下载 </a-button>
              <a-upload
                :multiple="false"
                v-model:file-list="currentFile"
                accept=".xls, .xlsx, .csv"
                name="file"
                action="/api/admin/excel/product/upload"
                :headers="{
                  Authorization: `Bearer ${token}`,
                }"
                @change="handleChange"
              >
                <a-button>
                  <upload-outlined></upload-outlined>
                  导入
                </a-button>
              </a-upload>
              <a-alert message="限EXCEL格式" type="warning" show-icon />
            </a-space>
          </a-col>
          <a-col :span="8">
            <p>
              货单模板
              <HuluTooltip> 根据模板进行采购，提高效率 </HuluTooltip>
            </p>
            <a-button type="primary" @click="toTemplate">管理模板</a-button>
          </a-col>
        </a-row>
      </a-card>
      <a-card>
        <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent"
          >新增</vxe-button
        >
        <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
          <template #preview="{ row }">
            <a-image :width="40" :src="row.preview" />
          </template>
          <template #action="{ row }">
            <a-space>
              <a-button type="primary" @click="editRow(row)">编辑</a-button>
              <a-popconfirm title="确定删除吗？" @confirm="remove(row)">
                <a-button type="primary" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </vxe-grid>
      </a-card>
    </div>
    <DraggableModal
      v-model:open="showEditPopup"
      title="新增货品"
      :keyboard="false"
      @ok="confirmEvent"
    >
      <vxe-form ref="formRef" v-bind="formOptions"></vxe-form>
    </DraggableModal>
  </div>
</template>

<script setup lang="ts">
import { VxeUI } from "vxe-pc-ui";
import XEUtils from "xe-utils";
import Api from "@/api/backend/api";
import {
  DoubleRightOutlined,
  UploadOutlined,
  BarChartOutlined,
  LineChartOutlined,
  FundOutlined,
  PieChartOutlined,
  SlidersOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
const userStore = useUserStore();
const token = userStore.token;
const { gridOptions } = useProduct();
const router = useRouter();
const formRef = ref();
const showEditPopup = ref(false);
const loading = ref(false);
const selectRow = ref<RowVO>();
const defaultData: RowVO = {
  id: null,
  name: "",
  nickname: "",
  role: "",
  sex: "",
  age: null,
  address: "",
};
const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
const sexItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: "VxeSelect",
  options: [
    { label: "女", value: "Women" },
    { label: "男", value: "Man" },
  ],
});
const loading_cloud = ref(false);
const cloudForm = ref({
  code: "",
});
const cloudSync = async () => {
  try {
    loading_cloud.value = true;
    const res = await Api.productController.cloud(cloudForm.value);
    loading_cloud.value = false;
    xGrid.value.commitProxy("query");
  } catch (error) {
    loading_cloud.value = false;
  }
};
const inputRef = ref();
const clear = () => {
  cloudForm.value = {};
  // 聚焦到id位searchInput上的input标签上
  inputRef.value.focus();
};
const formOptions = reactive<VxeFormProps<RowVO>>({
  titleWidth: 80,
  titleAlign: "right",
  titleColon: true,
  data: XEUtils.clone(defaultData, true),
  rules: {
    name: [
      { required: true, message: "请输入名称" },
      { min: 3, max: 5, message: "长度在 3 到 5 个字符" },
    ],
    sex: [{ required: true, message: "请选择性别" }],
    age: [{ required: true, message: "请输入年龄" }],
  },
  items: [
    {
      field: "name",
      title: "名称",
      span: 12,
      itemRender: { name: "VxeInput" },
    },
    {
      field: "nickname",
      title: "昵称",
      span: 12,
      itemRender: { name: "VxeInput" },
    },
    { field: "sex", title: "性别", span: 12, itemRender: sexItemRender },
    {
      field: "age",
      title: "年龄",
      span: 12,
      itemRender: { name: "VxeNumberInput" },
    },
    {
      field: "address",
      title: "地址",
      span: 24,
      itemRender: {
        name: "VxeTextarea",
        props: { autosize: { minRows: 2, maxRows: 4 } },
      },
    },
  ],
});
const addEvent = (row) => {
  router.push("/inventory/product/create");
};

const editRow = (row: RowVO) => {
  router.push(`/inventory/product/${row.id}/edit`);
};

const confirmEvent = async () => {
  const $form = formRef.value;
  if ($form) {
    const errMap = await $form.validate();
    if (!errMap) {
      showEditPopup.value = false;
      VxeUI.modal.message({ content: "保存成功", status: "success" });
    }
  }
};

const remove = async (row: any) => {
  await Api.productController.destroy({ id: row.id });
  xGrid.value.commitProxy("query");
};

//上传
const currentFile = ref(null);
const handleChange = (info: UploadChangeParam) => {
  const status = info.file.status;
  if (status !== "uploading") {
    // console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} 上传成功.`);
  } else if (status === "error") {
    message.error(`${info.file.name} 上传失败.`);
  }
  if (info.file.status === "done") {
    // 替换当前上传文件列表为最新的上传成功的文件
    currentFile.value = [info.file];
  } else if (info.file.status === "removed") {
    // 如果文件被移除，则清空当前文件
    this.currentFile = null;
  }
};

// 进入模板
const toTemplate = () => {
  router.push(`/inventory/product/producttemplate`);
};
</script>

<style scoped lang="less">
.box {
  position: relative;
  .icon {
    color: white;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    z-index:0;
    font-size:64px;
  }
}
</style>
